<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(holder, index) in holders" :key="index">
        <div
            class="box"
            :class="{ selected: holder.selected }"
            @click="selectHolder(holder)"
        >
          <span class="number">{{ holder.id }}</span>
          <img v-if="holder.orderId !== 0" src="../assets/beverage.png" alt="Beverage" class="box-img">
        </div>
        <div v-if="holder.selected" class="info-bubble">
          <p>置物格号： {{ holder.id }}</p>
          <div v-if="holder.orderId !== 0">
            <p>订单编号： {{ order.orderNumber }}</p>
            <p>饮料名称： {{ order.milkteaName }}</p>
            <p>顾客名称： {{ order.customerName }}</p>
            <p>顾客手机号码： {{ order.customerPhone }}</p>
            <p>订购时间： {{ order.orderTime }}</p>
            <p>完成时间： {{ order.completionTime }}</p>
            <p>取物状态： {{ order.placeStatus }}</p>
            <p>订购数量： {{ order.count }}</p>
          </div>
          <div v-if="holder.orderId == 0">
            <p style="font-family: 'Arial', sans-serif; font-weight: 300; color: #666; text-align: center;">闲置</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import request from "@/utils/request";

export default {
  name: 'Holder',
  data() {
    return {
      holders: [],
      order: []
    }
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.request.get("/merchant/holder/list").then(res => {
        this.holders = res.data.map(holder => ({...holder, selected: false})); // 初始化选中状态
      });
    },
    selectHolder(selectedHolder) {
      //获取数据
      if(selectedHolder.orderId != 0){
        this.request.get("/merchant/orders/"+selectedHolder.orderId).then(res => {
          this.order = res.data
        });
      }else {
        this.order = []
      }

      // 取消所有其他方框的选中状态
      this.holders.forEach(holder => {
        if (holder !== selectedHolder) {
          holder.selected = false;
        }
      });

      // 切换当前 holder 的选中状态
      selectedHolder.selected = !selectedHolder.selected;



    }
  }
}
</script>

<style scoped>
.box {
  background-color: #d3dce6; /* 灰色 */
  color: #fff;
  width: 262px;
  height: 262px;
  padding: 8px 14px;
  font-size: 58px;
  font-family: 'Arial', sans-serif;
  border-radius: 4px;
  position: relative; /* 使子元素可以相对于这个盒子定位 */
  cursor: pointer; /* 更改鼠标指针形状 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.box.selected {
  background-color: #e59040; /* 选中时背景颜色变化 */
  color: #ffffff; /* 文字颜色变化 */
}

.number {
  position: absolute; /* 绝对定位，相对于 .box */
  top: 8px; /* 距离顶部8px */
  left: 14px; /* 距离左边14px */
}

.box-img {
  max-width: 100%; /* 图片最大宽度不超过容器 */
  max-height: 100%; /* 图片最大高度不超过容器 */
  width: auto; /* 自动调整宽度 */
  height: auto; /* 自动调整高度 */
  position: absolute; /* 绝对定位，相对于 .box */
  top: 50%; /* 图片垂直居中 */
  left: 50%; /* 图片水平居中 */
  transform: translate(-50%, -50%); /* 精确居中 */
  max-width: 80%; /* 图片最大宽度为容器的80%，防止过大 */
  max-height: 80%; /* 图片最大高度为容器的80%，防止过高 */
}

.info-bubble {
  margin-top: 10px;
  padding: 10px 20px; /* 增加左右内边距 */
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left; /* 文字靠左对齐 */
  color: #333;
  font-size: 14px;
  position: relative;
  max-width: calc(100% - 5px); /* 减去左右内边距，确保不超出父容器 */
  width: 90%; /* 设置初始宽度为80% */
  margin-left: auto;
  margin-right: auto;
}

.info-bubble::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #f0f0f0 transparent transparent transparent;
}
</style>